﻿<UserControl x:Class="OI.Controls.Navigator"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>

        <ControlTemplate x:Name="imageButton" TargetType="Button">
            <Border BorderThickness="1" Child="{TemplateBinding Content}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="borderBrush" Storyboard.TargetProperty="Color" To="Transparent" Duration="0:0:0.1" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="borderBrush" Storyboard.TargetProperty="Color" To="{StaticResource ChromeColorHi}" Duration="0:0:0.1" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border.BorderBrush>
                    <SolidColorBrush x:Name="borderBrush" Color="Transparent" />
                </Border.BorderBrush>
            </Border>
        </ControlTemplate>

        <ControlTemplate x:Name="enabler" TargetType="CheckBox">
            <Border BorderThickness="0.5">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="borderBrush" Storyboard.TargetProperty="Color" To="Transparent" Duration="0:0:0.1" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="borderBrush" Storyboard.TargetProperty="Color" To="{StaticResource ChromeColorHi}" Duration="0:0:0.1" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0:0:0.1" Storyboard.TargetName="label" Storyboard.TargetProperty="Text">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="&lt;&lt;" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0:0:0.1" Storyboard.TargetName="label" Storyboard.TargetProperty="Text">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value=">>" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border.BorderBrush>
                    <SolidColorBrush x:Name="borderBrush" Color="Transparent" />
                </Border.BorderBrush>
                <TextBlock x:Name="label" Text=">>" Foreground="White" FontSize="8" VerticalAlignment="Center" />
            </Border>
        </ControlTemplate>

        <ControlTemplate x:Name="labelRadio" TargetType="RadioButton">
            <Border BorderThickness="0.5" Background="Transparent" CornerRadius="0" Margin="2" Padding="8,2,8,0">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="fillBrush" Storyboard.TargetProperty="Color" To="{StaticResource ChromeColorHi}" Duration="0:0:0.1" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="fillBrush" Storyboard.TargetProperty="Color" To="Transparent" Duration="0:0:0.1" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="borderBrush" Storyboard.TargetProperty="Color" To="Transparent" Duration="0:0:0.1" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="borderBrush" Storyboard.TargetProperty="Color" To="{StaticResource ChromeColorHi}" Duration="0:0:0.1" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border.BorderBrush>
                    <SolidColorBrush x:Name="borderBrush" Color="Transparent" />
                </Border.BorderBrush>
                <StackPanel>
                    <TextBlock x:Name="label" Foreground="White" FontWeight="Normal" Text="{TemplateBinding Content}" />
                    <Polygon HorizontalAlignment="Center" Points="0,5 10,5 5,0">
                        <Polygon.Fill>
                            <SolidColorBrush x:Name="fillBrush" Color="Transparent" />
                        </Polygon.Fill>
                    </Polygon>
                </StackPanel>
            </Border>
        </ControlTemplate>
        
    </UserControl.Resources>
    
    <Grid x:Name="LayoutRoot">
        <Grid.Triggers>
            <EventTrigger>
                <BeginStoryboard x:Name="storyMouseOver">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.15" To="1" Storyboard.TargetName="bg1" Storyboard.TargetProperty="Opacity" />
                        <DoubleAnimation Duration="0:0:0.15" To="1" Storyboard.TargetName="bg2" Storyboard.TargetProperty="Opacity" />
                        <DoubleAnimation Duration="0:0:0.15" To="1" Storyboard.TargetName="compassFill" Storyboard.TargetProperty="Opacity" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger>
                <BeginStoryboard x:Name="storyNormal">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.15" To="0.8" Storyboard.TargetName="bg1" Storyboard.TargetProperty="Opacity" />
                        <DoubleAnimation Duration="0:0:0.15" To="0.8" Storyboard.TargetName="bg2" Storyboard.TargetProperty="Opacity" />
                        <DoubleAnimation Duration="0:0:0.15" To="0.8" Storyboard.TargetName="compassFill" Storyboard.TargetProperty="Opacity" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>

        <Grid x:Name="bg1" Background="{StaticResource ChromeColorBrush}" Grid.ColumnSpan="3" Opacity="0.8" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave" Height="40"/>

        <Grid x:Name="bg2" Background="{StaticResource ChromeColorBrush}" Grid.Row="1" Grid.RowSpan="2" Opacity="0.8" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave" Width="40" />

        <StackPanel Orientation="Horizontal" Grid.Column="1" Margin="30,4,0,0" >
            <StackPanel Orientation="Horizontal" 
                        Visibility="{Binding ElementName=checkIfEnabled, Path=IsChecked, Converter={StaticResource BoolToVisibility}}">
                <RadioButton x:Name="Road" Template="{StaticResource labelRadio}" IsChecked="True" Checked="Road_Checked" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave">Road</RadioButton>
                <RadioButton x:Name="Aerial" Template="{StaticResource labelRadio}" Checked="Aerial_Checked" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave">Aerial</RadioButton>
                <RadioButton x:Name="Hybrid" Template="{StaticResource labelRadio}" Checked="Hybrid_Checked" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave">Hybrid</RadioButton>
                <Line X1="0" X2="0" Y1="0" Y2="16" StrokeThickness="1" Stroke="White" Margin="0,6,8,0" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave" />
            </StackPanel>
            <CheckBox x:Name="checkIfEnabled" Template="{StaticResource enabler}" IsChecked="True" Margin="0,0,2,3" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave" />
        </StackPanel>
        
        <StackPanel Orientation="Vertical" Grid.Row="1" Margin="4,30,0,0"
                     Visibility="{Binding ElementName=checkIfEnabled, Path=IsChecked, Converter={StaticResource BoolToVisibility}}">
            <Button x:Name="zoomIn" Template="{StaticResource imageButton}" Margin="2" Click="zoomIn_Click" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave" >
                <Image Source="../Images/zoom_in.png" Stretch="None" Margin="6" />
            </Button>
            <Button x:Name="zoomOut" Template="{StaticResource imageButton}" Margin="2" Click="zoomOut_Click" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave" >
                <Image Source="../Images/zoom_out.png" Stretch="None" Margin="6" />
            </Button>
        </StackPanel>

        <Grid Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="0,0,0,0" Width="45" Height="45" HorizontalAlignment="Left" VerticalAlignment="Top"
               Visibility="{Binding ElementName=checkIfEnabled, Path=IsChecked, Converter={StaticResource BoolToVisibility}}">

            <Ellipse x:Name="compass" Width="45" Height="45" Stroke="{StaticResource ChromeColorHiBrush}" StrokeThickness="2.5" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave" MouseLeftButtonDown="compass_MouseLeftButtonDown" MouseMove="compass_MouseMove" MouseLeftButtonUp="compass_MouseLeftButtonUp" >
                <Ellipse.Fill>
                    <SolidColorBrush x:Name="compassFill" Color="{StaticResource ChromeColor}" Opacity="0.8" />
                </Ellipse.Fill>
            </Ellipse>

            <Path Data="M 8,18 2,22 8,26 2,22 8,18 " Stroke="#FFFFFFFF" StrokeThickness="2" StrokeEndLineCap="Round" StrokeLineJoin="Round"/>
            <Path Data="M 37,18 43,22 37,26 43,22 37,18 " Stroke="#FFFFFFFF" StrokeThickness="2" StrokeEndLineCap="Round" StrokeLineJoin="Round"/>
            <Path Data="M 18,8 22,2 26,8 22,2 18,8 " Stroke="#FFFFFFFF" StrokeThickness="2" StrokeEndLineCap="Round" StrokeLineJoin="Round"/>
            <Path Data="M 18,37 22,43 26,37 22,43 18,37 " Stroke="#FFFFFFFF" StrokeThickness="2" StrokeEndLineCap="Round" StrokeLineJoin="Round"/>

        </Grid>

    </Grid>
</UserControl>
